<template>
  <div class="login-box">
    <div class="box">
      <el-form
        label-position="top"
        label-width="100px"
        :model="form"
        class="myform"
        ref="myform"
        :rules="rules"
      >
        <el-form-item label="旧密码" prop="oldpass">
          <el-input
            clearable
            v-model="form.oldpass"
            :prefix-icon="Lock"
            show-password
            type="password"
            placeholder="请输入旧密码"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newpass">
          <el-input
            clearable
            @blur="checkDbNewPass"
            v-model="form.newpass"
            :prefix-icon="Lock"
            show-password
            type="password"
            placeholder="请输入新密码"
          />
        </el-form-item>
        <el-form-item label="确认新密码" prop="dbnewpass">
          <el-input
            clearable
            v-model="form.dbnewpass"
            :prefix-icon="Lock"
            show-password
            type="password"
            placeholder="请确认新密码"
          />
        </el-form-item>
      </el-form>
      <el-button @click="dialogVisible">取消</el-button>
      <el-button type="danger" @click="changePass">修改</el-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "@vue/reactivity";
import { reg } from "@/utils/validate";
import { ElMessage } from "element-plus";
import {useRouter} from 'vue-router';
import {ajax} from '@/api'
export default {
  setup() {
      const router=useRouter();
    const myform = ref();
    const checkDbPass = (rule, value, callback) => {
      console.log("1111");
      if (state.form.newpass != value) {
        callback(new Error("两次密码不一样!!!"));
      } else {
        callback();
      }
    };
    const state = reactive({
      form: {},
      rules: {
        oldpass: [
          { required: true, message: "密码必填" },
          {
            pattern: reg.pwd,
            message: "密码格式不正确",
          },
        ],
        newpass: [
          { required: true, message: "新密码必填" },
          {
            pattern: reg.pwd,
            message: "密码格式不正确",
          },
        ],
        dbnewpass: [
          { required: true, message: "确认密码必填" },
          {
            pattern: reg.pwd,
            message: "密码格式不正确",
          },
          {
            validator: checkDbPass,
            message: "两次密码不一样",
            trigger: "blur",
          },
        ],
      },
    });

    const checkDbNewPass = () => {
      // console.log("checkdapass");
      // 两次密码正则通过 才回去比较2次密码是否一致
      if (
        reg.pwd.test(state.form.newpass) &&
        reg.pwd.test(state.form.dbnewpass)
      ) {
        myform.value.validateField("dbnewpass");
      }
    };
    const dialogVisible = () => {
      myform.value.resetFields();
    };
    const changePass = () => {
      myform.value.validate(async (valid) => {
        if (valid) {
          let { code, result } = await ajax.changeuser({
            password: state.form.newpass,
          });
          if (code == 200) {
            router.replace({ name: "login" });
            sessionStorage.removeItem("token");
            store.commit("changeUserInfo", null);
          } else {
            ElMessage.error("输入信息有误");
          }
        }
      });
    };
    return {
      ...toRefs(state),
      checkDbPass,
      checkDbNewPass,
      myform,
      dialogVisible,
      changePass,
    };
  },
};
</script>



<style lang="scss" scoped>
.box{
    padding: 50px;
}
</style>